<template>
  <el-scrollbar>
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" text-color="#fff"
      :default-active="onRoutes" :router="true" :collapse="isCollapse">
      <el-sub-menu index="/user">
        <template #title>
          <el-icon>
            <User />
          </el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item index="/user">
          <el-icon><icon-menu /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/role">
          <el-icon>
            <Postcard />
          </el-icon>
          <span>角色管理</span>
        </el-menu-item>
        <el-menu-item index="/resource">
          <el-icon>
            <MessageBox />
          </el-icon>
          <span>权限管理</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { ref, computed } from "vue";
import {
  Menu as IconMenu,
  Setting,
  Document,
  Histogram,
  User,
  MessageBox,
  Postcard,
} from "@element-plus/icons-vue";
//import { useStore } from 'vuex' // 引入useStore 方法
//const store = useStore()  // 该方法用于返回store 实例
//console.log(store.state.token)
//console.log(store.state.passwd)  // store 实例对象
//const menuItems = store.state.menu
//console.log(menuItems)
const isCollapse = ref(false);
function collapsechange() {
  isCollapse.value = !isCollapse.value;
}

// 路由表



// 路由传参
const route = useRoute();
const onRoutes = computed(() => {
  return route.path;
});

defineExpose({
  collapsechange,
  isCollapse,
});
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo {
  min-height: 100vh;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 280px;
  min-height: 100vh;
}
</style>
